<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>webpack3</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <!-- 引入iconfont -->
  <link rel="stylesheet" href="//at.alicdn.com/t/font_404009_rhlwhy0ytdahh0k9.css">
  <!-- 引入symbol -->
  <script src="//at.alicdn.com/t/font_543540_1v6i4iu9ffnd0a4i.js"></script>
  <style>
    body,html{
      max-width:720px;
      height:100vh;
      margin:0 auto !important;
      position:relative
    }
    .scene {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9;
      height: 100vh;
      width: 100%;
      background: #26a2ff;
      background: -webkit-linear-gradient(top left, #26a2ff 0%, #52d5f4 100%);
      background: -moz-linear-gradient(top left, #26a2ff 0%, #52d5f4 100%);
      background: -o-linear-gradient(top left, #26a2ff 0%, #52d5f4 100%);
      background: linear-gradient(to bottom right, #26a2ff 0%, #52d5f4 100%);
    }

    .scene img {
      width: 200px;
      display: block;
      margin: 0px auto;
      margin-bottom: 50px;
    }

    .loading {
      width: 150px;
      height: 15px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .loading span {
      display: inline-block;
      width: 15px;
      height: 100%;
      margin-right: 5px;
      background: lightgreen;
      -webkit-transform-origin: right bottom;
      -webkit-animation: load 1s ease infinite;
    }

    .loading span:last-child {
      margin-right: 0px;
    }

    @-webkit-keyframes load {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        -webkit-transform: rotate(90deg);
      }
    }

    .loading span:nth-child(1) {
      -webkit-animation-delay: 0.13s;
    }

    .loading span:nth-child(2) {
      -webkit-animation-delay: 0.26s;
    }

    .loading span:nth-child(3) {
      -webkit-animation-delay: 0.39s;
    }

    .loading span:nth-child(4) {
      -webkit-animation-delay: 0.52s;
    }

    .loading span:nth-child(5) {
      -webkit-animation-delay: 0.65s;
    }
    .bottomTip{
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #fff;
    }
  </style>
</head>

<body>
    <div class="scene" id="scene">
        <img src="./static/logo.png" alt="">
        <div class="loading">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <p class="bottomTip">Welcome</p>
      </div>
  <div id="app"></div>
  <!-- 引入组件库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <!-- built files will be auto injected -->
</body>
<script>
  
     window.onload=function(){
       document.getElementById('scene').style.display='none'
     }
  </script>

</html>
